<template>
  <div class="container">
    <div class="top-nav">
      <template v-for="(item, index) of topNavBar">
        <div :key="index" class="nav-item" :class="{'nav-active' : topNavBaroIndex === index}" @click="goTarget('#' + item.target, index)">{{item.name}}</div>
      </template>
    </div>
    <div class="bg-color-white mar-t-20">
      <div class="base-info" id="base-set" style="padding-top: 40px;">
        <el-form ref="liveRoom" :model="liveRoom" :rules="rules" label-width="136px">
          <el-form-item label="直播间标题：" prop="roomName">
            <div class="input-wrap flex flex-between">
              <el-input v-model="liveRoom.roomName" placeholder="填写本次直播的标题" style="width:500px;"></el-input>
              <div class="font-13 font-color-9">{{liveRoom.roomName.length}}/17</div>
            </div>
          </el-form-item>
          <el-form-item label="开播时间：" prop="startAndEndTime">
            <el-date-picker
              v-model="liveRoom.startAndEndTime"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              :picker-options="pickerOptions"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-popover placement="top-start" title="" width="200" trigger="hover" content="开始时间需在当前时间10分钟后，且不能在6个月后。开始时间和结束时间间隔不能短于30分钟，不能超过12小时。">
              <i class="el-icon-question" slot="reference"></i>
            </el-popover>
          </el-form-item>
          <el-form-item label="直播昵称" prop="anchorName">
            <div class="input-wrap flex flex-between">
              <el-input v-model="liveRoom.anchorName" placeholder="填写主播昵称" style="width:500px;"></el-input>
              <div class="font-13 font-color-9">{{liveRoom.anchorName.length}}/15</div>
            </div>
          </el-form-item>
          <el-form-item label="主播微信账号：" prop="anchorWechat" class="height-item">
            <div v-if="anchor && anchor.avatar" class="flex v-align-c cursor-p">
              <label><img :src="anchor.avatar" class="user-avatar" style="width: 68px;height: 68px;"></label>
              <div class="font-14 pad-l-10 height-59 line-h-14">
                <div><span class="font-color-9">昵称：</span>{{anchor.nickname}}</div>
                <div><span class="font-color-9">手机：</span>{{anchor.phone}}</div>
              </div>
            </div>
            <el-button type="text" @click="dialogPlayerVisible=true">从主播管理中选择</el-button>
            <p style="color: #999999; font-size: 6px;margin:0">每个直播间需要绑定一个用作核实主播身份，不会展示给观众。</p>
          </el-form-item>
          <el-form-item label="主播副号：" style="position: relative" class="height-item">
            <div class="input-wrap">
              <el-input v-model="liveRoom.subAnchorWechat" style="width:500px;" placeholder="填写主播副微信号"></el-input>
              <el-popover placement="top-start" title="" width="200" trigger="hover" content="需提供通过实名认证的微信号。">
                <i class="el-icon-question" slot="reference"></i>
              </el-popover>
            </div>
            <p style="color: #999999; font-size: 6px;margin:0">直播时，主播副号能在主播端进行推送商品，抽奖等操作。仅从主播端小程序进入时，副号身份才生效。若从观众端进入，副号身份不生效</p>
          </el-form-item>
        </el-form>
      </div>
      <div class="room-info">
        <div class="config-area" id="share-card-set">
          <p class="unit-title">分享卡片样式设置</p>
          <el-row :gutter="20">
            <el-col :span="10" style="position:relative">
              <img src="../../../../assets/images/share-card-model.png" alt="" style="width:100%">
              <img v-if="liveRoom.shareImg" :src="liveRoom.shareImg" alt="" style="width:57%;position:absolute;height:53%;left:23%;top:26%">
            </el-col>
            <el-col :span="10">
              <h6 style="color:#333333;font-size:7px;margin:0">分享卡片封面</h6>
              <p style="color:#999999;font-size:7px">观众在微信对话框内分享的直播间将以分享卡片的形式呈现。 建议尺寸：800像素 * 640像素，图片大小不得超过1M。</p>
              <el-upload :data="token" accept="image/jpeg,image/gif,image/png,image/bmp" name="files"
                         :show-file-list ="showFileList" action="/api/common/uploadFiles" class="upload-demo"
                         :on-success="(res, file, fileList) =>handleUploadSuccess(res, file, fileList, 'shareImg')" :before-upload="beforeUpload">
                <el-button size="small" type="primary" class="upload-btn">点击上传</el-button>
              </el-upload>
            </el-col>
          </el-row>
        </div>
        <div class="config-area" id="live-channel-set">
          <p class="unit-title">购物直播频道样式</p>
          <el-row :gutter="20">
            <el-col :span="10" style="position:relative">
              <img src="../../../../assets/images/shop-card-model.png" alt="" style="width:100%">
              <img v-if="liveRoom.feedsImg" :src="liveRoom.feedsImg" alt="" style="width:50%;position:absolute;width:46%;left:6%;top:5%;height:85%;border-top-left-radius: 5px;border-bottom-left-radius: 5px;">
            </el-col>
            <el-col :span="10">
              <h6 style="color:#333333;font-size:7px;margin:0">直播卡片封面</h6>
              <p style="color:#999999;font-size:7px">官方推荐的小程序直播将会出现在购物直播频道内。</p>
              <span style="color:#4C7DB8;font-size:7px">了解购物直播频道</span>
              <p style="color:#999999;font-size:7px">图片建议大小为 800像素 * 800像素。 图片大小不超过 100KB。 图片内容遵循平台规范后更容易被推荐。</p>
              <span style="color:#4C7DB8;font-size:7px">了解平台规范</span>
              <el-upload  accept="image/jpeg,image/gif,image/png,image/bmp" name="files"
                          :show-file-list ="showFileList" :data="token" class="upload-demo" v-loading="posterFileLoading"
                          action="/api/common/uploadFiles" :on-success="(res, file, fileList) =>handleUploadSuccess(res, file, fileList, 'feedsImg')" :before-upload="beforeUpload">
                <el-button size="small" type="primary" class="upload-btn">点击上传</el-button>
              </el-upload>
            </el-col>
          </el-row>
        </div>
        <div class="config-area" id="live-room-set">
          <p class="unit-title">直播间样式配置</p>
          <el-row :gutter="20" style="position:relative">
            <el-col :span="10" style="position:relative">
              <img src="../../../../assets/images/room-card-model.png" alt="" style="width:100%">
              <img v-if="liveRoom.coverImg" :src="liveRoom.coverImg" alt="" style="width:92%;position:absolute;top:0;left:4%;height:100%">
            </el-col>
            <el-col :span="10">
              <h6 style="color:#333333;font-size:7px;margin:0">直播间背景墙</h6>
              <p style="color:#999999;font-size:7px">播间背景墙是每个直播间的默认背景。 建议尺寸：1080像素 * 1920像素 图片大小不得超过2M。</p>
              <el-upload :show-file-list ="showFileList" name="files" class="upload-demo" v-loading="posterFileLoading"
                         action="/api/common/uploadFiles" :data="token" accept="image/jpeg,image/gif,image/png,image/bmp"
                         :on-success="(res, file, fileList) =>handleUploadSuccess(res, file, fileList, 'coverImg')"
                         :before-upload="beforeUpload">
                <el-button size="small" type="primary" class="upload-btn">点击上传</el-button>
              </el-upload>
              <div>
                <h6>直播间功能</h6>
                <el-checkbox-group v-model="checkedFeatures">
                  <el-checkbox v-for="item in roomFeatures" :label="item" :key="item" style="display:block; margin-bottom:10px">{{item}}</el-checkbox>
                </el-checkbox-group>
                <p style="color:#999999;font-size:7px">关闭分享功能需直播组件更新至1.1.4及以上才可生效。</p>
              </div>
              <div>
                <h6>拓展功能</h6>
                <el-switch v-model="closeReplay" active-text="" inactive-text="回放" active-color="#409EFF">
                </el-switch>
                <p style="color:#999999;font-size:7px">回放功能需要直播组件更新到1.0.5及以上才可生效</p>
                <el-switch v-model="closeKf" active-text="" inactive-text="客服" active-color="#409EFF">
                </el-switch>
                <p style="color:#999999;font-size:7px">客服功能需要直播组件更新到1.1.4及以上才可生效</p>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="config-area" id="live-share-set">
          <p class="unit-title">直播分享海报</p>
          <el-row :gutter="20">
            <el-col :span="10" style="position:relative">
              <img src="../../../../assets/images/room-video-card.png" alt="" style="width:100%">
              <img v-if="liveRoom.introduceVideo" :src="liveRoom.introduceVideo" alt="" style="width:92%;height:37%;position:absolute;left:4%;top:9%">
            </el-col>
            <el-col :span="10">
              <h6 style="color:#333333;font-size:7px;margin:0">视频设置</h6>
              <p style="color:#999999;font-size:7px">顾客在未开播之前了解直播 视频大小不超过5M。</p>
              <el-upload :show-file-list ="showFileList" class="upload-demo" action="/api/common/uploadFiles" 
              name="files" :data="token" accept="image/jpeg,image/gif,image/png,image/bmp"
              :on-success="(res, file, fileList) =>handleUploadSuccess(res, file, fileList, 'introduceVideo')"
              :before-upload="beforeUpload">
                <el-button size="small" type="primary" class="upload-btn">点击上传</el-button>
              </el-upload>
              <h6 style="color:#333333;font-size:7px;">分享文案</h6>
              <el-form style="width:300px">
                <el-form-item>
                  <el-input :rows="10" type="textarea" v-model.trim="liveRoom.shareCopy" placeholder="古尚古iPhone6数据线6s苹果5加长5s手机6Plus充 电线器7P快充8X短se六7P冲iphonex正品..."></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="pad-l-30 pad-r-30">
        <div class="config-last-area" id="live-goods-set">
          <p class="unit-title">直播间商品</p>
          <el-button type="primary" @click="dialogFormVisible=true" class="mar-t-20">导入商品</el-button>
          <div class="table-container mar-t-20">
            <el-table :data="liveRoomGoodsList" element-loading-text="加载中" style="width: 100%" >
              <el-table-column min-width="400px" label="基本信息" fixed="left">
                <template slot-scope="scope">
                  <div class="flex v-align-c cursor-p">
                    <label><img :src="scope.row.goodsImgUrl" class="user-avatar" style="width: 68px;height: 68px;" /></label>
                    <div class="font-14 pad-l-10 goods-title">
                      <div>{{ scope.row.title }}</div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column min-width="200px" label="价格" align="left">
                <template slot-scope="scope">
                  <span v-if="scope.row.priceType === 1">￥{{ scope.row.price }}</span>
                  <span v-if="scope.row.priceType === 2">￥{{ scope.row.minPrice }}~￥{{ scope.row.maxPrice }}</span>
                  <span v-if="scope.row.priceType === 3">
                        <span>原价￥{{ scope.row.originalPrice }}元</span><br />
                        <span>现价￥{{ scope.row.nowPrice }}</span>
                      </span>
                </template>
              </el-table-column>
              <el-table-column min-width="200px" label="操作" align="right">
                <template slot-scope="scope">
                  <el-button type="text" size="medium" @click="deleteLiveRoomGoods(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-row style="text-align:center;padding-top:50px;padding-bottom:50px">
        <el-button>返回</el-button>
        <el-button type="primary" @click="submit">创建</el-button>
      </el-row>
    </div>

    <!-- 主播选择 弹窗 -->
    <el-dialog title="主播选择器" :visible.sync="dialogPlayerVisible" :close-on-press-escape="true" width="650px">
      <div class="pad-10 scroll-layer-box">
        <div class="pad-5" style="background:#f2f2f2">
          <el-select v-model="anchorTextCol" placeholder="请选择" style="width: 130px;">
            <el-option label="微客昵称" value="nickname"> </el-option>
            <el-option label="微客手机号" value="phone"> </el-option>
          </el-select>
          <el-input clearable v-model.trim="anchorKeyword" placeholder="请输入搜索内容" style="width: 228px" class="mar-r-16"></el-input>
          <el-button class="group-b-left" type="primary" size="small" @click="pageAnchor">查询</el-button>
          <el-button class="group-b-right" size="small" @click="resetAnchor">重置</el-button>
        </div>
        <div class="mar-t-20">
          <el-table :data="anchorList" v-loading="anchorLoading" element-loading-text="加载中">
            <el-table-column label="主播" width="450px">
              <template slot-scope="scope">
                <div class="flex v-align-c cursor-p">
                  <label><img :src="scope.row.avatar" class="user-avatar" style="width: 68px;height: 68px;" v-if="scope.row.avatar"></label>
                  <div class="font-14 pad-l-10 height-59 line-h-14">
                    <div><span class="font-color-9">昵称：</span>{{scope.row.nickname}}</div>
                    <div><span class="font-color-9">手机：</span>{{scope.row.phone}}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="selectAnchor(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="mar-t-10 mar-b-10 text-align-r">
            <el-pagination background @size-change="handleAnchorSizeChange" @current-change="handleAnchorCurrentChange" :current-page="searchAnchorQuery.currentPage" :page-sizes="[5, 10, 50, 100]" :page-size="searchAnchorQuery.size"
                           layout="total, sizes, prev, pager, next, jumper" :total="anchorTotal"></el-pagination>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 导入商品 弹窗 -->
    <el-dialog title="导入商品" :visible.sync="dialogFormVisible" :close-on-press-escape="true" width="650px">
      <div class="pad-10">
        <div class="pad-l-15 pad-t-15 pad-b-15" style="background:#f2f2f2">
          <el-input clearable placeholder="请输入商品名称" style="width: 228px" class="mar-r-16" v-model="liveGoodsTitle"></el-input>
          <el-button class="group-b-left" type="primary" size="small" @click="pageLiveGoods">查询</el-button>
          <el-button class="group-b-right" size="small" @click="resetLiveGoods">重置</el-button>
        </div>
        <div class="mar-t-20">
          <el-table :data="liveGoodsList"  @selection-change="handleGoodsSelectionChange" height="400">
            <el-table-column type="selection" ></el-table-column>
            <el-table-column label="商品名称" width="300px" prop="title">
              <template slot-scope="scope">
                <div class="flex v-align-c cursor-p" style="margin-right: 30px;">
                  <label><img :src="scope.row.goodsImgUrl" class="width-65 height-65"></label>
                  <div class="font-14 pad-l-10 v-align-h height-65">
                    <div class="goods-title">
                      <div class="line-2">
                        <template v-if="scope.row.categoryName">
                          <el-tag size="mini" v-if="scope.row.skuFlag == 1" type="danger" effect="light">多</el-tag>
                        </template>
                        {{scope.row.title}}
                      </div>
                    </div>
                    <template v-if="scope.row.categoryName">
                      <span class="font-color-6 font-13">[{{scope.row.categoryName}}]</span>
                    </template>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="价格">
              <template slot-scope="scope">
                {{scope.row.minPrice}} - {{scope.row.maxPrice}}
              </template>
            </el-table-column>
          </el-table>
          <div class="mar-t-10 mar-b-10 text-align-r">
            <el-pagination background @size-change="handleGoodsSizeChange" @current-change="handleGoodsCurrentChange" :current-page="searchGoodsQuery.currentPage" :page-sizes="[5, 10, 50, 100]" :page-size="searchGoodsQuery.size"
                           layout="total, sizes, prev, pager, next, jumper" :total="goodsTotal"></el-pagination>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="selectLiveGoods">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { getToken } from '@/utils/auth'
  import { addLiveRoom } from '@/api/user/liveRoom'
  import { pageLiveGoods } from '@/api/goods/liveGoods'
  import { pageAnchor } from '@/api/user/member'
  export default {
    data() {
      return {
        token: '',
        posterFileLoading: false,
        dialogPlayerVisible: false,
        dialogFormVisible: false,
        liveRoom: {
          enterpriseId: this.getEnterpriseId(),
          roomName: '',
          startDate: '',
          endDate: '',
          startAndEndTime: '',
          anchorName: '',
          anchorWechat: '',
          subAnchorWechat: '',
          shareImg: '',
          feedsImg: '',
          coverImg: '',
          closeLike: 1,
          closeGoods: 1,
          closeComment: 1,
          closeShare: 1,
          closeReplay: 1,
          closeKf: 1,
          introduceVideo: ''
        },
        rules: {
          roomName: [
            { max: 17, message: '直播间标题最多17个字节' },
            { min: 3, message: '直播间标题要大于3个字节' },
            { required: true, message: '请填写直播间标题', trigger: 'blur' }
          ],
          anchorName: [
            { max: 15, message: '主播昵称最多15个字节' },
            { min: 2, message: '主播昵称要大于2个字节' },
            { required: true, message: '请填写主播昵称', trigger: 'blur' }
          ],
          startAndEndTime: [
            { required: true, message: '请填写开播时间', trigger: 'blur' }
          ],
          anchorWechat: [
            { required: true, message: '请填写主播微信账号', trigger: 'blur' }
          ],
          subAnchorWechat: [
            { max: 20, message: '主播副号最多20个字节' }
          ]
        },
        roomFeatures: ['点赞', '评论', '商品货架', '分享'],
        checkedFeatures: [],
        closeReplay: false,
        closeKf: false,
        shareCardImgUrl: '',
        posterImgUrl: '',
        videoPosterImgUrl: '',
        roomStyleImgUrl: '',
        showFileList: false,
        multipleGoodsSelection: [],
        liveRoomGoodsList: [],
        searchGoodsQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10,
          title: ''
        },
        goodsTotal: 0,
        liveGoodsTitle: '',
        liveGoodsList: [],
        anchor: {},
        anchorTextCol: 'nickname',
        anchorKeyword: '',
        anchorList: [],
        searchAnchorQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10
        },
        anchorTotal: 0,
        anchorLoading: false,
        pickerOptions: {
          disabledDate(time) {
            // 开播时间的选择器选择的时间只能选择当天之后
            return time.getTime() < Date.now() - 8.64e7
          }
        },
        topNavBar: [
          { name: '基本设置', target: 'base-set' },
          { name: '分享卡片样式配置', target: 'share-card-set' },
          { name: '购物直播频道样式', target: 'live-channel-set' },
          { name: '直播间样式配置', target: 'live-room-set' },
          { name: '直播分享海报', target: 'live-share-set' },
          { name: '直播间商品', target: 'live-goods-set' }
        ],
        topNavBaroIndex: 0
      }
    },
    created() {
      this.token = { accessToken: getToken() }
      this.pageLiveGoods()
      this.pageAnchor()
    },
    mounted() {
      this.$nextTick(function() {
        for (let i = 0; i < this.topNavBar.length; i++) {
          const dom = document.getElementById(`${this.topNavBar[i]['target']}`)
          this.$set(this.topNavBar[i], 'top', dom.offsetTop)
        }
      })
      const that = this
      window.addEventListener('mousewheel', function() {
        const scroll = document.documentElement.scrollTop || document.body.scrollTop
        for (let i = 0; i < that.topNavBar.length; i++) {
          if (that.topNavBar[i]['top'] - scroll < 185) {
            that.topNavBaroIndex = i
          }
        }
      })
    },
    methods: {
      handleUploadSuccess(res, file, fileList, img) {
        this.fullScreenLoading.close()
        if (res.code === 101) {
          switch (img) {
            case 'feedsImg':
              this.liveRoom.feedsImg = res.data[0]
              break
            case 'introduceVideo':
              this.liveRoom.introduceVideo = res.data[0]
              break
            case 'coverImg':
              this.liveRoom.coverImg = res.data[0]
              break
            case 'shareImg':
              this.liveRoom.shareImg = res.data[0]
              break
          }
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'
        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.fullScreenLoading = this.$loading({
          lock: true,
          text: '加载中',
          background: 'rgba(255, 255, 255, 0.5)'
        })
        // this.liveRoom.feedsImg = URL.createObjectURL(file)
        return (isJPG || isBMP || isGIF || isPNG)
      },
      goTarget(id, index) {
        document.querySelector(id).scrollIntoView({
          behavior: 'smooth',
          block: 'center'
        })
        this.topNavBaroIndex = index
      },
      submit() {
        this.$refs['liveRoom'].validate((isPass, errorInfo) => {
          if (!isPass) {
            this.$message.error('请先填写基本信息')
            return
          }
          if (!this.liveRoom.startAndEndTime || !this.liveRoom.startAndEndTime.length) {
            this.$message.error('请选择开播时间')
            return
          }
          if (!this.liveRoom.anchorWechat) {
            this.$message.error('请选择主播微信账号')
            return
          }
          this.liveRoom.startDate = this.liveRoom.startAndEndTime[0]
          this.liveRoom.endDate = this.liveRoom.startAndEndTime[1]
          // 开播时间不能小于10分钟之后
          const curDate = new Date()
          const startDate = new Date(this.liveRoom.startDate.replace(/-/g, '\\'))
          if (curDate.getTime() + (10 * 60 * 1000) > startDate.getTime()) {
            this.$message.error('开始时间需在当前时间10分钟后')
            return
          }

          if (!this.liveRoom.shareImg) {
            this.$message.error('请上传分享卡片封面')
            return
          }
          if (!this.liveRoom.feedsImg) {
            this.$message.error('请上传直播卡片封面')
            return
          }
          if (!this.liveRoom.coverImg) {
            this.$message.error('请上传直播间背景墙')
            return
          }
          if (this.checkedFeatures.length === 0) {
            this.$message.error('请选择直播间功能')
            return
          }
          if (!this.liveRoom.shareCopy) {
            this.$message.error('请输入分享文案')
            return
          }

          this.checkedFeatures.forEach(item => {
            if (item === '点赞') {
              this.liveRoom.closeLike = 0
            }
            if (item === '评论') {
              this.liveRoom.closeComment = 0
            }
            if (item === '商品货架') {
              this.liveRoom.closeGoods = 0
            }
            if (item === '分享') {
              this.liveRoom.closeShare = 0
            }
          })

          if (this.closeReplay) {
            this.liveRoom.closeReplay = 0
          }
          if (this.closeKf) {
            this.liveRoom.closeKf = 0
          }
          if (this.liveRoomGoodsList.length > 0) {
            this.liveRoom.liveGoodsIds = this.liveRoomGoodsList.map(e => e.liveGoodsId)
          }
          addLiveRoom(this.liveRoom).then(response => {
            if (response.isError) return
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.$router.go(-1)
          })
        })
      },
      deleteLiveRoomGoods(row) {
        const index = this.liveRoomGoodsList.findIndex((roomGoods) => row.liveGoodsId === roomGoods.liveGoodsId)
        this.liveRoomGoodsList.splice(index, 1)
      },
      selectLiveGoods() {
        if (!this.multipleGoodsSelection.length) {
          this.$message.error('请选择商品')
          return
        }
        this.multipleGoodsSelection.forEach(liveGoods => {
          const goods = this.liveRoomGoodsList.find((roomGoods) => liveGoods.liveGoodsId === roomGoods.liveGoodsId)
          if (goods) {
            // 已添加的不再添加
            return
          }
          this.liveRoomGoodsList.push(liveGoods)
        })
        this.dialogFormVisible = false
      },
      resetLiveGoods() {
        this.liveGoodsTitle = ''
        this.pageLiveGoods()
      },
      handleGoodsSelectionChange(val) {
        this.multipleGoodsSelection = val
      },
      handleGoodsSizeChange(val) {
        this.searchGoodsQuery.size = val
        this.pageLiveGoods()
      },
      handleGoodsCurrentChange(val) {
        this.searchGoodsQuery.currentPage = val
        this.pageLiveGoods()
      },
      pageLiveGoods() {
        this.searchGoodsQuery.auditStatus = 2
        this.searchGoodsQuery.title = this.liveGoodsTitle
        pageLiveGoods(this.searchGoodsQuery).then(response => {
          if (response.isError) return
          this.liveGoodsList = response.data.records
          this.goodsTotal = response.data.total
        })
      },
      resetAnchor() {
        this.anchorTextCol = 'nickname'
        this.anchorKeyword = ''
        this.searchAnchorQuery.currentPage = 1
        this.pageAnchor()
      },
      pageAnchor() {
        this.searchAnchorQuery[this.anchorTextCol] = this.anchorKeyword
        pageAnchor(this.searchAnchorQuery).then(response => {
          if (response.isError) return
          this.anchorList = response.data.records
          this.anchorTotal = response.data.total
        })
      },
      handleAnchorSizeChange(val) {
        this.searchAnchorQuery.size = val
        this.pageAnchor()
      },
      handleAnchorCurrentChange(val) {
        this.searchAnchorQuery.currentPage = val
        this.pageAnchor()
      },
      selectAnchor(row) {
        this.liveRoom.anchorWechat = row.wechatNo
        this.anchor = row
        this.dialogPlayerVisible = false
      }
    }
  }
</script>
<style lang="less" scoped>
.container {
  background: rgb(248, 249, 251);
  min-height: calc(100vh - 105px);
  padding: 0 30px;
  /deep/ .circle-2-tab .el-tabs__header {
    background: white !important;
  }
  /deep/.el-table-column--selection{
    .cell{
      padding-left: 14px;
    }
  }
}
.top-nav{
  position: sticky;
  top: 50px;
  left: 0;
  width: 100%;
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 999;
  box-shadow: 0 2px 6px #eee;
  color: #a1a1a1;
  .nav-item{
    cursor: pointer;
  }
  .nav-active{
    position: relative;
    color: #409eff;
    &::after{
      content: '';
      position: absolute;
      bottom: -20px;
      left: -15px;
      width: calc(100% + 30px);
      height: 2px;
      background-color: #409eff;
    }
  }
}
.link-color {
  color: rgb(0, 0, 255);
}
.base-info {
  background: white;
  font-size: 16px;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  width: 800px;
  margin: 0 auto;
  /deep/.el-form-item{
    label{
      text-align: left;
      font-size: 13px;
      font-weight: unset;
    }
  }
  /deep/.el-form-item__content{
    border-bottom: 1px solid #dcdfe6;
    height: 50px;
  }
  .height-item{
    /deep/.el-form-item__content{
      p{
        line-height: 2;
        padding: 10px 0;
      }
      height: auto;
    }
  }
  .input-wrap{
    /deep/input{
      border: unset;
    }
  }
}
.room-info {
  background: white;
  width: 800px;
  margin: 0 auto;
  font-size: 16px;
  .config-area {
    margin-top: 30px;
    .unit-title {
      font-size: 8px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      border-left: 2px solid #409eff;
      padding-left: 10px;
      height: 19px;
      line-height: 19px;
      font-size: 13px;
      font-weight: bold;
      margin-bottom: 23px;
    }
  }
}
.config-last-area{
  .unit-title {
    font-size: 8px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    border-left: 2px solid #409eff;
    padding-left: 10px;
    height: 19px;
    line-height: 19px;
    font-size: 13px;
    font-weight: bold;
  }
}
.list-wrap {
  margin-right: 200px;
}
.row_label {
  width: 80px;
  display: inline-block;
  text-align: right;
  margin-right: 20px;
}
.aplay-info {
  .row_label {
    width: 100px;
  }
}
.vertical-line {
  width: 2px;
  background: #999999;
  height: 100%;
  margin: 0 15px;
}
.watch-shop {
  background: white;
  padding: 30px 20px;
  .tip-title {
    color: rgb(58, 142, 230);
    margin: 20px 0;
  }
}
.clear-both {
  clear: both;
}
.shop-list {
  width: 20%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  float: left;
  margin-right: 100px;
  margin-top: 10px;
  font-size: 16px;
  .link-color {
    font-size: 13px;
  }
  .imgbox {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
    img {
      width: 55px;
      height: 55px;
      border-radius: 50%;
    }
  }
}
.list-default {
  font-weight: bold;
}
.list-bar {
  background: white;
}
.upload-btn {
  color: #409eff;
  background: #f7f9fb;
  border: none;
  margin-top: 20px;
}
</style>
